<template>
	<view class="wanlpage-likes wanl-product col-2-20" :style="[pageData.style]">
		
		<!--三张图片-->
		<!-- <view class="hotBox">
			<image :src="qt_homeimage[0]" class="left-image" @click="$wanlshop.to('/pages/new/otherzq')" ></image>
			<view class="hotRightBox">
				<image :src="qt_homeimage[1]"  @click="tips()" class="right-top-image"></image>
				<image :src="qt_homeimage[2]"  @click="tips()" class="right-bottom-image"></image>
			</view>
		</view> -->
		
		<view class="recommend-product">
			<view class="recommend-line"></view>
			<view class="recommend-title2">热销产品</view>
			<view class="recommend-line"></view>
		</view> 
		
		<view class="product-list">
			<view class="product-item" 
			v-for="(item,index) in dataList" 
			:key="index"
			@tap="handleGoods(item.id)"
			>
				<image :src="$wanlshop.oss(item.image, 125, 125)" mode="aspectFill" class="product-image"></image>
				<view class="product-title text-cut">{{item.title || ''}}</view>
				<view class="product-price">{{item.price || 0}}</view>
				<view class="zhekoujia product-price" v-if="item.is_discount">折扣价：<text class="text-price">{{ item.discount_price || 0 }}</text></view>
			</view>
		</view>
		
		<!-- <wanl-product :dataList="dataList" :dataStyle="`col-${pageData.params.colthree}-${pageData.params.colmargin}`" /> -->
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>
<script>
export default {
	name: 'WanlPageLikes',
	props: {
		lower: {
			type: Number,
			default: 0
		},
		pageData: {
			type: Object,
			default: function() {
				return {
					name: '猜你喜欢',
					type: 'likes',
					params: [],
					style: [],
					data: []
				};
			}
		}
	},
	data() {
		return {
			dataList: [], //数据
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'loading',
			contentText: {
				contentdown: '下拉加载更多',
				contentrefresh: '疯狂加载中...',
				contentnomore: '我是有底线的'
			},
			dataType:'goods',
			qt_homeimage:[],
		};
	},
	created() {
		this.getImages();
		
		this.loadData();
	},
	methods: {
		getImages(){
			uni.request({
				url: '/index/index',
				data: {
				},
				success: res => {
					this.qt_homeimage = res.data.qt_homeimage;
				}
			});
		},
		handleGoods(id) {
			if (this.dataType === 'goods') {
				this.onGoods(id);
			} else if (this.dataType === 'groups') {
				this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}`);
			}
		},
		async loadData(type) {
			this.status = 'loading';
			// 判断上拉还是下拉
			if (type === 'lower') {
				if (this.current_page >= this.last_page) {
					this.status = 'noMore';
					return false;
				} else {
					this.current_page += 1;
				}
			}
			await uni.request({
				url: '/wanlshop/product/likes',
				data: {
					page: this.current_page
				},
				success: res => {
					if (type === 'lower') {
						this.dataList = this.dataList.concat(res.data.data);
					} else {
						this.dataList = res.data.data;
					}
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					// 判断是否还有数据
					if (res.data.current_page === res.data.last_page || res.data.total === 0) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}
				}
			});
		},
		tips(){
			this.$wanlshop.msg('暂未开放');
		}
	},
	watch: {
		lower(newVal, oldVal) {
			this.loadData('lower');
		}
	}
};
</script>

<style scoped lang="scss">
.recommend-product{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 42rpx;
	margin-bottom: 33rpx;
}

.recommend-line{
	width: 119rpx;
	height: 2rpx;
	border: 2px solid #366BEB;
}

.recommend-title2{
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #333333;
	margin-left: 31rpx;
	margin-right: 31rpx;
}	

.product-list{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: 24rpx;
	margin-right: 24rpx;
}

.product-item{
	width: 341rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin-bottom: 33rpx;
	padding-bottom: 20rpx;
}

.product-image{
	width: 341rpx;
	height: 341rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.product-title{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #333333;
	margin-top: 20rpx;
	padding-left: 20rpx;
}

.product-price{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #F53938;
	margin-top: 20rpx;
	padding-left: 20rpx;
}

.zhekoujia{
	font-size: 26rpx;
}

.left-image{
	width: 340rpx;
	height: 300rpx;
	border-radius: 20rpx;
}

.hotRightBox {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.right-top-image{
	width: 340rpx;
	height: 140rpx;;
	border-radius: 20rpx;
}

.right-bottom-image{
	width: 340rpx;
	height: 140rpx;
	border-radius: 20rpx;
}

.hotBox {
    margin-left: 13px;
    margin-right: 13px;
    display: flex;
    justify-content: space-between;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
</style>
